<!DOCTYPE HTML>
<!--
	Forty by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Landing - Forty by HTML5 UP</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
		<link rel="stylesheet" href="../assets/css/main.css" />
		<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
		<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
		<link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css">
		
		<style>
			.jc_weather{
			float:left;
			border-right:1px solid white;
			width:33%;
			}
			.wea_container:after{
			clear:both;
			content:"";
			display:block;
			}
			.jc_nobor{
			border:none;
			}
		    .jc_weather img{
			vertical-align:middle;
			}
		</style>
	</head>
	<body>
		<!-- Wrapper -->
			<div id="wrapper">



					</nav>

				<!-- Banner -->
				<!-- Note: The "styleN" class below should match that of the header element. -->
					<section id="banner" class="style2">
						<div class="inner">
							<span class="image">
								<img src="../images/pic07.jpg" alt="" />
							</span>
							<header class="major">
								<h1>Weather</h1>
							</header>
							<div id="loc" class="content">
								<p></p>
							</div>
						</div>
					</section>

				<!-- Main -->
					<div id="main">

						<!-- One -->
							<section id="one">
								<div class="inner">
									<header class="major">
										<h2>当前</h2>
									</header>
													<div class="table-wrapper">
														<table>
															<tbody>
																<tr>
																	<td>气温</td>
																	<td id="nowTemperature"></td>
																</tr>
																<tr>
																	<td>天气</td>
																	<td id="nowWeather"></td>
																</tr>
																<tr>
																	<td>湿度</td>
																	<td id="nowSD"></td>
																</tr>
																<tr>
																	<td>空气质量</td>
																	<td id="airQuality"></td>
																</tr>
																<tr>
																	<td>风</td>
																	<td id="wind"></td>
																</tr>
															</tbody>
														</table>
													</div>
								</div>
							</section>

						<!-- Two -->
							<section id="two" class="spotlights">
								<section>
									<a href="generic.html" class="image">
										<img src="../images/new01.jpg" alt="" data-position="center center" />
									</a>
									<div class="content">
										<div class="inner">
											<header class="major">
												<h3>生活建议</h3>
											</header>
											<p>
											<div id="suggest_table" class="table-wrapper">
														<table>
															<tbody>
																<tr>
																   <td><i id="travel" class="fa fa-camera-retro fa-1x">    </i>
																</tr>
																<tr>
																	<td><i id="xq" class="fa fa-heart fa-1x">    </i></td>
																</tr>
																<tr>
																	<td><i id="ls" class="fa fa-sun-o fa-1x">    </i></td>
																</tr>

															</tbody>
														</table>
											</div>
											</p>
										</div>
									</div>
								</section>
								<section>
										<img src="../images/new02.jpg" alt="" data-position="top center" />
									<div class="content">
										<div class="inner">
											<header class="major">
												<h3>今日趋势</h3>
											</header>
											<div id="futureWeather" style="min-width:300px;height:400px"></div>
                                            <br>
										</div>
									</div>
								</section>
								<section>
									<a href="generic.html" class="image">
										<img src="../images/new03.jpg" alt="" data-position="25% 25%" />
									</a>
									<div class="content">
										<div class="inner">
											<header class="major">
												<h3>明日预告</h3>
											</header>
											<p>
											<div id="future_table" class="table-wrapper">
														<table>
															<tbody>
																<tr>
																	<td>气温</td>
																	<td id="futureTem"></td>
																</tr>
																<tr>
																	<td>天气</td>
																	<td id="futureWea"></td>
																</tr>
																<tr>
																	<td>降水概率</td>
																	<td id="futureJS"></td>
																</tr>
															</tbody>
														</table>
													</div>
											</p>
										</div>
									</div>
								</section>
							</section>


					</div>



		<!-- Scripts -->
			<script src="../assets/js/jquery.min.js"></script>
			<script src="../assets/js/jquery.scrolly.min.js"></script>
			<script src="../assets/js/jquery.scrollex.min.js"></script>
			<script src="../assets/js/skel.min.js"></script>
			<script src="../assets/js/util.js"></script>
            <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
			<script src="http://cdn.hcharts.cn/highcharts/themes/dark-unica.js"></script>
			<script>
	$(function () {
	var temp = window.location.href;
    var openID = temp.split("?")[1].split("&")[0].split("=")[1];
	var weatherData;
	var url="http://118.178.142.172:80/"
	$.ajax({
     	url:url + "api/getWeatherData",
     	type:"POST",
     	data:{"openID":openID},
     	dataType:"JSON",
     	async: false,
     	success:function(data){
     		weatherData = data
     	}
     });
	 
	$("#loc").append(weatherData.loc);
	
	
	
	
	$("#travel").append(weatherData.travelDesc);
	$("#xq").append(weatherData.xqDesc);
	$("#ls").append(weatherData.lsDesc);
	
	$("#nowWeather").append(weatherData.day_weather);
	$("#nowTemperature").append(weatherData.nowTemperature+"℃");
	$("#nowSD").append(weatherData.sd);
	$("#airQuality").append(weatherData.airQuality);
	$("#wind").append(weatherData.windPower+"<br>"+weatherData.windDirection);
	
	$("#futureTem").append(weatherData.futureData.f2.nightAirTemperature+"℃~"+weatherData.futureData.f2.dayAirtemperature+"℃");
	$("#futureWea").append(weatherData.futureData.f2.dayWeather);
	$("#futureJS").append(weatherData.futureData.f2.jiangshui);	
	
    $('#futureWeather').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: '今日气温'
        },
        xAxis: {
            categories: weatherData.hourForcast.hour
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: '最高温',
            data: weatherData.hourForcast.max
        }, {
            name: '最低温',
            data: weatherData.hourForcast.min
        }]
    });
});

			</script>
			<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
			<script src="assets/js/main.js"></script>

	</body>
</html>